{% extends "base.html" %}

{% block title %}客户管理 - {% if contact %}编辑联系人{% else %}添加联系人{% endif %}{% endblock %}

{% block page_title %}{% endblock %}
{% block page_subtitle %}{% endblock %}

{% block content %}
<div class="container mx-auto space-y-6">
    <!-- 面包屑导航 -->
    <nav class="text-sm breadcrumbs mb-6">
        <ol class="flex items-center space-x-2">
            <li><a href="{{ url_for('main.home') }}" class="text-gray-500 hover:text-gray-700">首页</a></li>
            <li><i class="fas fa-chevron-right text-gray-400 text-xs mx-2"></i></li>
            <li><a href="{{ url_for('customer.list_customers') }}" class="text-gray-500 hover:text-gray-700">客户管理</a></li>
            <li><i class="fas fa-chevron-right text-gray-400 text-xs mx-2"></i></li>
            <li><a href="{{ url_for('customer.customer_detail', customer_id=customer.id) }}" class="text-gray-500 hover:text-gray-700">{{ customer.name }}</a></li>
            <li><i class="fas fa-chevron-right text-gray-400 text-xs mx-2"></i></li>
            <li class="text-gray-700">{% if contact %}编辑联系人{% else %}添加联系人{% endif %}</li>
        </ol>
    </nav>

    <div class="bg-white rounded-lg shadow">
        <div class="p-6">
            <form method="post">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <div class="grid grid-cols-1 gap-6">
                    <!-- 基本信息 -->
                    <div>
                        <h3 class="text-lg font-medium text-gray-900 mb-4">基本信息</h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label for="name" class="block text-sm font-medium text-gray-700">姓名 <span class="text-red-500">*</span></label>
                                <input type="text" name="name" id="name" required
                                    class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary"
                                    value="{{ contact.name if contact else '' }}">
                            </div>
                            <div>
                                <label for="position" class="block text-sm font-medium text-gray-700">职位 <span class="text-red-500">*</span></label>
                                <input type="text" name="position" id="position" required
                                    class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary"
                                    value="{{ contact.position if contact else '' }}">
                            </div>
                            <div>
                                <label for="phone" class="block text-sm font-medium text-gray-700">电话 <span class="text-red-500">*</span></label>
                                <input type="text" name="phone" id="phone" required
                                    class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary"
                                    value="{{ contact.phone if contact else '' }}">
                            </div>
                            <div>
                                <label for="email" class="block text-sm font-medium text-gray-700">邮箱</label>
                                <input type="email" name="email" id="email"
                                    class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary"
                                    value="{{ contact.email if contact else '' }}">
                            </div>
                            <div>
                                <label for="is_primary" class="block text-sm font-medium text-gray-700">主要联系人</label>
                                <div class="mt-1">
                                    <input type="checkbox" name="is_primary" id="is_primary" value="1" 
                                        class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded"
                                        {% if contact and contact.is_primary %}checked{% endif %}>
                                    <label for="is_primary" class="ml-2 block text-sm text-gray-900">是</label>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 其他信息 -->
                    <div>
                        <h3 class="text-lg font-medium text-gray-900 mb-4">其他信息</h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label for="department" class="block text-sm font-medium text-gray-700">部门</label>
                                <input type="text" name="department" id="department"
                                    class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary"
                                    value="{{ contact.department if contact else '' }}">
                            </div>
                            <div>
                                <label for="gender" class="block text-sm font-medium text-gray-700">性别</label>
                                <select name="gender" id="gender"
                                    class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary">
                                    <option value="">请选择性别</option>
                                    <option value="男" {% if contact and contact.gender == '男' %}selected{% endif %}>男</option>
                                    <option value="女" {% if contact and contact.gender == '女' %}selected{% endif %}>女</option>
                                </select>
                            </div>
                            <div>
                                <label for="birthday" class="block text-sm font-medium text-gray-700">生日</label>
                                <input type="date" name="birthday" id="birthday"
                                    class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary"
                                    value="{{ contact.birthday.strftime('%Y-%m-%d') if contact and contact.birthday else '' }}">
                            </div>
                            <div>
                                <label for="wechat" class="block text-sm font-medium text-gray-700">微信号</label>
                                <input type="text" name="wechat" id="wechat"
                                    class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary"
                                    value="{{ contact.wechat if contact else '' }}">
                            </div>
                        </div>
                    </div>

                    <!-- 备注信息 -->
                    <div>
                        <h3 class="text-lg font-medium text-gray-900 mb-4">备注信息</h3>
                        <div>
                            <label for="remarks" class="block text-sm font-medium text-gray-700">备注</label>
                            <textarea name="remarks" id="remarks" rows="4"
                                class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary">{{ contact.remarks if contact else '' }}</textarea>
                        </div>
                    </div>
                </div>

                <div class="mt-6 flex justify-end space-x-3">
                    <a href="{{ url_for('customer.customer_detail', customer_id=customer.id) }}" class="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
                        取消
                    </a>
                    <button type="submit" class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
                        {% if contact %}保存修改{% else %}添加联系人{% endif %}
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}